<template>
  <div class="page">
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <div class="addButton">
          <el-button type="primary" size="small" @click="addData()">添加</el-button>
        </div>
      </div>
      <div>
        <!-- <el-scrollbar class="page-component__scroll" style="height:100%">
          <div style="height:630px;"> -->
            <el-tabs
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
              :before-leave="Tabever"
            >
              <el-tab-pane label="市级部门" name="first">
                <div class="searchList">
                  <div class="nav">
                    <div>
                      <span>年份:</span>
                      <el-date-picker
                        v-model="year"
                        type="year"
                        placeholder="选择年"
                        size="small"
                        value-format="yyyy"
                      ></el-date-picker>
                    </div>
                    <div>
                      <span>上下半年：</span>
                      <el-select v-model="timeNode" placeholder="请选择" size="small">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <el-button type="primary" size="small" @click="getfileList(1)">搜索</el-button>
                    <div></div>
                  </div>
                </div>
                <el-scrollbar class="page-component__scroll" style="height:100%">
                  <div style="height:600px;">
                    <el-table
                      border
                      :data="list"
                      style="width: 100%"
                      align="center"
                      :header-cell-style="{ background: '#f5f5f5' }"
                      height="600"
                    >
                      <el-table-column
                        prop="bunen"
                        :label="tableHeader.bumen"
                        width="100%"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        v-for="(item, i) in tableHeader.yuefen"
                        :key="i"
                        :label="item.title"
                        :prop="item.value"
                      ></el-table-column>
                      <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                          <!-- <el-button type="text" @click="eitdBaseData(scope.row)">编辑</el-button> -->
                          <el-button type="text" @click="delBaseData(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-scrollbar>
              </el-tab-pane>
              <el-tab-pane label="区县" name="second">
                <div class="searchList">
                  <div class="nav">
                    <div>
                      <span>年份:</span>
                      <el-date-picker
                        v-model="year"
                        type="year"
                        placeholder="选择年"
                        size="small"
                        value-format="yyyy"
                      ></el-date-picker>
                    </div>
                    <div>
                      <span>上下半年：</span>
                      <el-select v-model="timeNode" placeholder="请选择" size="small">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <el-button type="primary" size="small" @click="getfileList(2)">搜索</el-button>
                    <div></div>
                  </div>
                </div>
                <el-scrollbar class="page-component__scroll" style="height:100%">
                  <div style="height:600px;">
                    <el-table
                      border
                      :data="list"
                      style="width: 100%"
                      align="center"
                      :header-cell-style="{ background: '#f5f5f5' }"
                      height="600"
                    >
                      <el-table-column
                        prop="bunen"
                        :label="tableHeader.bumen"
                        width="100%"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        v-for="(item, i) in tableHeader.yuefen"
                        :key="i"
                        :label="item.title"
                        :prop="item.value"
                      ></el-table-column>
                      <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                          <!-- <el-button type="text" @click="eitdBaseData(scope.row)">编辑</el-button> -->
                          <el-button type="text" @click="delBaseData(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-scrollbar>
              </el-tab-pane>
              <el-tab-pane label="西咸新区" name="theer">
                <div class="searchList">
                  <div class="nav">
                    <div>
                      <span>年份:</span>
                      <el-date-picker
                        v-model="year"
                        type="year"
                        placeholder="选择年"
                        size="small"
                        value-format="yyyy"
                      ></el-date-picker>
                    </div>
                    <div>
                      <span>上下半年：</span>
                      <el-select v-model="timeNode" placeholder="请选择" size="small">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <el-button type="primary" size="small" @click="getfileList(4)">搜索</el-button>
                    <div></div>
                  </div>
                </div>
                <el-scrollbar class="page-component__scroll" style="height:100%">
                  <div style="height:600px;">
                    <el-table
                      border
                      :data="list"
                      style="width: 100%"
                      align="center"
                      :header-cell-style="{ background: '#f5f5f5' }"
                      height="600"
                    >
                      <el-table-column
                        prop="bunen"
                        :label="tableHeader.bumen"
                        width="100%"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        v-for="(item, i) in tableHeader.yuefen"
                        :key="i"
                        :label="item.title"
                        :prop="item.value"
                      ></el-table-column>
                      <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                          <!-- <el-button type="text" @click="eitdBaseData(scope.row)">编辑</el-button> -->
                          <el-button type="text" @click="delBaseData(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-scrollbar>
              </el-tab-pane>
              <el-tab-pane label="开发区" name="frous">
                <div class="searchList">
                  <div class="nav">
                    <div>
                      <span>年份:</span>
                      <el-date-picker
                        v-model="year"
                        type="year"
                        placeholder="选择年"
                        size="small"
                        value-format="yyyy"
                      ></el-date-picker>
                    </div>
                    <div>
                      <span>上下半年：</span>
                      <el-select v-model="timeNode" placeholder="请选择" size="small">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <el-button type="primary" size="small" @click="getfileList(3)">搜索</el-button>
                    <div></div>
                  </div>
                </div>
                <el-scrollbar class="page-component__scroll" style="height:100%">
                  <div style="height:600px;">
                    <el-table
                      border
                      :data="list"
                      style="width: 100%"
                      align="center"
                      :header-cell-style="{ background: '#f5f5f5' }"
                      height="600"
                    >
                      <el-table-column
                        prop="bunen"
                        :label="tableHeader.bumen"
                        width="100%"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        v-for="(item, i) in tableHeader.yuefen"
                        :key="i"
                        :label="item.title"
                        :prop="item.value"
                      ></el-table-column>
                      <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                          <!-- <el-button type="text" @click="eitdBaseData(scope.row)">编辑</el-button> -->
                          <el-button type="text" @click="delBaseData(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-scrollbar>
              </el-tab-pane>
            </el-tabs>
          <!-- </div>
        </el-scrollbar> -->
      </div>
      <!-- 添加弹框 -->
      <el-dialog
        title="基础数据管理"
        :visible.sync="DatadialogVisible"
        width="50%"
        :before-close="handleClose"
        :close-on-click-modal="false"
      >
        <el-form ref="taskRef" :model="BasicData" label-width="120px">
          <el-form-item prop="year" label="年份" style="width:48%;display: inline-block;">
            <el-date-picker
              v-model="BasicData.year"
              type="year"
              value-format="yyyy"
              placeholder="选择年"
              size="small"
              style="width:70%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="TopBotyear" label="上下半年" style="width:48%;display: inline-block;">
            <el-select
              v-model="BasicData.timeNode"
              style="width:70%"
              size="small"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="name" label="单位名称" style="width:48%;display: inline-block;">
            <el-select v-model="BasicData.name" style="width:70%" size="small">
              <el-option
                v-for="(item, index) in sectionOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="Number"
            v-for="(item, i) in tableHeaderTow.yuefen"
            :key="i"
            :label="item.title"
            style="width:48%;display: inline-block;"
          >
            <el-input
              type="text"
              style="width:70%"
              size="small"
              v-model="item.data"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </el-form-item>
          <el-button class="saveBtn" type="primary" @click="submitForm()">保存</el-button>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      year: "2020", //年份
      timeNode: "1", //上下半年
      dialogVisible: false,
      options: [
        {
          value: "1",
          label: "上半年",
        },
        {
          value: "2",
          label: "下半年",
        },
      ],
      tableHeader: {
        id: "",
        bumen: "单位",
        yuefen: [],
      },
      tableHeaderTow: {
        id: "",
        bumen: "单位",
        yuefen: [],
      },
      tableData: [],
      dialogList: [],
      list: [],
      DatadialogVisible: false, //基础数据弹框
      BasicData: {
        //基础数据
        id: "",
        name: "",
        year: "2020",
        data: [],
        timeNode: "1",
      },
      activeName: "first",
      currIndex: 1,
      sectionOptions: [],
    };
  },
  mounted() {
    this.hetTable();
    this.getfileList(1);
    this.getdepartmentTypeList();
  },
  methods: {
    getdepartmentTypeList() {
      this.$axios
        .post("dept/getDepartmentTypeList")
        .then((res) => {
          if (res.code == 200) {
            this.sectionOptions = [];
            res.data.forEach((item, index) => {
              if (item.id == this.currIndex) {
                this.sectionOptions = item.departments;
              }
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 基础数据添加框
    addData() {
      this.tableHeaderTow.yuefen.forEach((i) => {
        i.data = "";
      });
      // this.BasicData.name = "";
      this.DatadialogVisible = true;
      this.getdepartmentTypeList();
      // this.getfileList();
    },
    // 基础数据关闭框
    handleClose(done) {
      this.DatadialogVisible = false;
      this.tableHeaderTow.yuefen = [];
      this.BasicData.data = [];
      this.getfileList(this.currIndex);
      this.hetTable();
    },
    // 编辑按钮
    eitdBaseData(data) {
      this.DatadialogVisible = true;
      this.BasicData.id = data.id;
      this.BasicData.name = data.bunen;
      this.tableHeaderTow.yuefen.forEach((i) => {
        i.data = data[i.value];
      });
    },
    delBaseData(data) {
      console.log(data);
      this.$axios
        .post("/departmentEvaluate/removeOne", { departmentId: data.id }, 2)
        .then((res) => {
          if (res.code == 200) {
            this.$message(res.msg);
            this.getfileList(this.currIndex);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 基础数据保存接口
    submitForm() {
      console.log(this.list);
      let _isFlag = true;
      this.list.forEach((item, index) => {
        if (item.id == this.BasicData.name) {
          _isFlag = false;
        }
      });
      if (_isFlag == false) {
        this.$message.error("不能添加已有的单位，请重新选择");
        return;
      }

      this.tableHeaderTow.yuefen.forEach((element) => {
        if (element.data > 1000 || element.data < 0) {
          _isFlag = false;
        }
      });

      if (_isFlag == false) {
        this.$message.error("分数不能超过1000或小于0");
        return;
      }

      let postData = {
        year: this.BasicData.year,
        timeNode: Number(this.BasicData.timeNode),
        departmentId: this.BasicData.name,
      };
      let arr = [];
      this.tableHeaderTow.yuefen.forEach((i) => {
        arr.push({ taskId: Number(i.id), score: i.data });
      });

      postData["data"] = arr;
      if (this.BasicData.id == "") {
        this.$axios.post("/departmentEvaluate/add", postData).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: `数据更新成功`,
              type: "success",
            });
            this.getfileList(this.currIndex);
            this.DatadialogVisible = false;
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        postData["id"] = this.BasicData.id;
        this.$axios.post("/OfficialBaseData/update", postData).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: `数据更新成功`,
              type: "success",
            });
            this.getfileList(this.currIndex);
            this.DatadialogVisible = false;
          } else {
            this.$message.error(res.msg);
          }
        });
      }
      console.log(postData);
    },
    // 打分
    getfileList(val = 1) {
      this.$axios
        .post("/departmentEvaluate/getListOne", {
          year: this.year,
          timeNode: this.timeNode,
          departmentTypeId: val != "" ? val : 1,
        })
        .then((res) => {
          if (res.code == 200) {
            let array = [];
            res.data.forEach((i, key) => {
              array.push({ bunen: i.departmentName, id: i.departmentId });
              i.evaluateTaskPos.forEach((j, index) => {
                array[key][`${"index" + index}`] = j.score;
              });
            });
            this.list = array;
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    hetTable() {
      this.$axios
        .post(`/task/getList`)
        .then((res) => {
          if (res.code == 200) {
            let arr = [];
            let arr1 = [];
            res.data.forEach((i, index) => {
              // if (i.children && i.children.length == 0) {
              arr.push({
                title: i.title,
                value: `${"index" + index}`,
                data: "",
                id: `${i.id}`,
              });
              // } else {
              //   i.children.forEach((item, key) => {
              //     arr1.push({
              //       title: item.title,
              //       value: `${"index"}${index + 1 + key}`,
              //       data: "",
              //       id: `${item.id}`,
              //     });
              //   });
              // }
            });
            // this.tableHeader.yuefen = arr.concat(arr1);
            this.tableHeader.yuefen = arr;
            this.tableHeaderTow.yuefen = arr;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    Tabever(activeName, oldActiveName) {
      if (activeName == "first") {
        this.getfileList(1);
        this.currIndex = 1;
      } else if (activeName == "second") {
        this.getfileList(2);
        this.currIndex = 2;
      } else if (activeName == "theer") {
        this.getfileList(4);
        this.currIndex = 4;
      } else if (activeName == "frous") {
        this.getfileList(3);
        this.currIndex = 3;
      }
    },
  },
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
}
.searchList {
  text-align: right;
  margin-bottom: 10px;
}
.filling {
  font-size: 12px;
  border: 0px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.nav {
  /* float: left; */
  width: 80%;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  justify-content: left;
}
.nav .el-button {
  margin-left: 20px;
}
.addButton {
  float: right;
}
.saveBtn {
  display: block;
  margin: 0 auto;
}
</style>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
